<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>学生学籍档案管理</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.min.css" rel="stylesheet">
    <link href="../js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header"><h4>管理员列表</h4></div>
                <div class="card-body">

                    <div id="toolbar" class="toolbar-btn-action">
                        <button id="btn_add" type="button" class="btn btn-primary m-r-5">
                            <span class="mdi mdi-shape-rectangle-plus" aria-hidden="true"></span>新增
                        </button>
                        <button id="btn_edit_en" type="button" class="btn btn-success m-r-5">
                            <span class="mdi mdi-check" aria-hidden="true"></span>启用
                        </button>
                        <button id="btn_edit_dis" type="button" class="btn btn-warning m-r-5">
                            <span class="mdi mdi-block-helper" aria-hidden="true"></span>禁用
                        </button>
                        <button id="btn_delete" type="button" class="btn btn-danger">
                            <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
                        </button>
                    </div>
                    <table id="tb_departments"></table>

                </div>
            </div>
        </div>

    </div>

</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->
<link href="../js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="../text/javascript" src="js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="../text/javascript" src="js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>

<script type="text/javascript" src="../js/main.min.js"></script>

<script type="text/javascript">
    $('#tb_departments').bootstrapTable({
        classes: 'table table-bordered table-hover table-striped',
        url: '/management/listData',
        method: 'get',
        dataType : 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
        uniqueId: 'id',
        idField: 'id',             // 每行的唯一标识字段
        toolbar: '#toolbar',       // 工具按钮容器
        //clickToSelect: true,     // 是否启用点击选中行
        showColumns: true,         // 是否显示所有的列
        showRefresh: true,         // 是否显示刷新按钮

        //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

        pagination: true,                    // 是否显示分页
        sortOrder: "asc",                    // 排序方式
        queryParams: function(params) {
            var temp = {
                pageSize: params.pageSize,         // 每页数据量
                curPage: params.curPage,
                sortColumns: params.sort,           // 排序的列名
                sortOrder: params.order      // 排序方式'asc' 'desc'
            };
            return temp;
        },                                   // 传递参数
        sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
        pageNumber: 1,                       // 初始化加载第一页，默认第一页
        pageSize: 10,                        // 每页的记录行数
        pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
        //search: true,                      // 是否显示表格搜索，此搜索是客户端搜索

        //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
        //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

        columns: [{
            checkbox: true    // 是否显示复选框
        },
            {
                field: 'studentId',
                title: 'ID',
                sortable: true    // 是否排序
            }, {
                field: 'period',
                title: '年级'
            }, {
                field: 'period',
                title: '班级名称'},
            {
                field: 'studentNumber',
                title: '学号'},
            {
                field: 'studentName',
                title: '姓名'},
            {
                field: 'birthDate',
                title: '出生日期'},
            {
                field: 'gender',
                title: '性别'},
            {
                field: 'studentState',
                title: '状态'},
            {
                field: 'nation',
                title: '民族'},
            {
                field: 'origin',
                title: '生源地'},
            {
                field: 'politicsStatus',
                title: '政治面貌'},
            {
                field: 'patentsName',
                title: '家长姓名'},
            {
                field: 'phone',
                title: '电话'},
            {
                field: 'address',
                title: '家庭住址'},
            {
                field: 'entranceTime',
                title: '入学日期'},
            {
                field: 'idNumber',
                title: '身份证号'},
            {
                field: 'graTime',
                title: '毕业时间'},
            {
                field: 'graCareer',
                title: '毕业去向'},
            {
                field: 'remark',
                title: '备注'},
            {
                field: '',
                title: '操作',


                formatter: btnGroup,  // 自定义方法
                events: {
                    'click .edit-btn': function (event, value, row, index) {
                        editUser(row.id);
                    },
                    'click .del-btn': function (event, value, row, index) {
                        delUser(row.id);
                    },
                    'click .show-btn': function (event, value, row, index) {
                        showUser(row);
                    }
                }
            }],

        onLoadSuccess: function(data){
            $("[data-toggle='tooltip']").tooltip();
        }
    });

    // 操作按钮
   function btnGroup ()
    {
        var html =
            '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
            '<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
            '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
        return html;
    }

    // 操作方法 - 编辑
    function editUser(managerId)
    {
        alert('编辑信息跳转');
    }
    // 操作方法 - 删除
    function delUser(managerId)
    {

        $.ajax({
            type:'post',
            url:'/back/manager/delete',
            dataType:'json',
            data:{'managerId':managerId},
            success:function (ret) {
                if (ret) {
                    alert('信息删除成功');
                    location.reload();
                } else {
                    alert('信息删除失败');
                }
            },
            error:function (ret) {
                alert('信息删除失败');
            }
        });


    }
    // 操作方法 - 查看
    function showUser()
    {
        alert('查看详细');
    }
</script>
</body>
</html>